<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>点击穿透问题</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			#wraper{
				position: relative;
				width: 100%;
				height: 100%;
			}
			#baidu{
				width: 100%;
				height: 200px;
				display: block;
				background-color: orange;
			}
			#shade{
				position: absolute;
				text-align: center;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5)
			}
			.title{
				margin-top: 80px;
				color: white;
			}
			.close{
				margin-top: 30px;
				width: 100px;
				height: 50px;
				font-size: 30px;
			}

		</style>
	</head>
	<body>
		<div id="wraper">
			<a id="baidu" href="https://www.baidu.com">点我去百度</a>
			<div id="shade">
				<h1 class="title">恭喜一等奖！</h1>
				<button class="close">关闭</button>
			</div>
		</div>
		<script type="text/javascript" >
				const btn = document.querySelector('.close')
				const shade = document.getElementById('shade')
				const baidu = document.getElementById('baidu')

				btn.ontouchstart = ()=>{
					setTimeout(()=>{
						shade.style.display = 'none'
					},350)
				}

		</script>
	</body>
</html>